<template>
  <basic-container >
    <div style="width: 100%;height: 100%;display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; z-index: 1000">
      <div style="font-size: 14px;margin-top: 30px;height: 46px;display: flex;align-items: center;
background: #FFF7E8;width: 98%">
        <img src="https://yulonghuyu.oss-cn-hangzhou.aliyuncs.com/app-web/xitong/zhuyidapx%402x.png" style="width: 18px;height: 18px;margin-left: 30px">
        <span style="margin-left: 20px">
        说明：平台优惠券是<span style="color: red">平台承担部分金额</span>的一种优惠券类型，<span style="color: red">平台参与法人活动请使用平台优惠券</span>，请和运营方认真核对无误后使用。
          </span>
      </div>
      <el-form  :model="form" label-width="120px" :rules="rules" style="margin-top: 20px" ref="ruleForm">
        <el-form-item label="游戏：" >
          <el-select style="width: 500px" v-model="form.gameProjectId" filterable clearable placeholder="请选择" @click.native="gameSelect" @change="selectProject">
            <el-option
              v-for="item in gamelist"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="区服：">
          <el-select style="width: 500px" v-model="form.serverNum" filterable clearable placeholder="区服名称" multiple>
            <el-option
              v-for="item in gameserverlist"
              :key="item.serverNum"
              :label="item.serverNum + ' - ' + item.serverName"
              :value="item.serverNum"/>
          </el-select>
        </el-form-item>

        <el-form-item label="优惠档位：" prop="id">
          <el-select style="width: 500px" v-model="form.couponId" @click.native="coupon" clearable placeholder="请选择" multiple>
            <el-option
              v-for="item in couponList"
              :key="item.activityCouponId"
              :label="item.couponName+'(活动时间'+formatDateTime(item.activityStartTime) +' 到 '+ formatDateTime(item.activityEndTime)+')'"
              :value="item.activityCouponId"/>
          </el-select>
        </el-form-item>

        <el-form-item label="角色满足等级：">
          <el-input v-model="form.roleLevel" clearable placeholder="请输入角色等级" style="width:220px" maxlength='5' oninput="value=value.replace(/[^\d]/g,'')"></el-input>
          &nbsp;&nbsp;<span style="color: red">注：输入符合条件的角色等级，不输入则满足所有</span>
        </el-form-item>

        <el-form-item  label="创建截止日期：">
          <el-date-picker
            v-model="form.time" type="datetime" placeholder="选择日期" @change="dataSearch" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="closePayPackageSure('ruleForm')">确认发放</el-button>
          <el-button  @click="form={}">取消</el-button>
        </el-form-item>
      </el-form>
      <div id="app" v-if="showLoading" style="position:absolute;height: 100%;background-color: rgba(247, 243, 242,0.5); z-index: 9999">
        <div class="first-loading-wrp">
          <div class="loading-wrp">
            <span class="dot dot-spin">
              <i></i>
              <i></i>
              <i></i>
              <i></i>
            </span>
          </div>
          <h2>正在发放中,请耐心等待...</h2>
        </div>
      </div>
    </div>
  </basic-container>
</template>

<script>


import {gameList, gameserverList} from "@/api/game/game";
import {detailCouponList,grantCouponBatch} from "@/api/system/details";

export default {
  data() {
    return {
      form: {
        gameProjectId: '',
        account: '',
        couponId: '',
        type:2,
        sendType:1,//这个页面的发送方式
        activeName:'1',
        time:'',
        serverNum:'',
        projectId:'',
        gameId:'',
        roleLevel:''
      },
      gameserverlist:[],
      showTime:false,
      showLoading:false,
      gamePra:{ gameProjectId:''},
      gamelist:[],
      couponList:[],
      startTime: '',
      endTime: '',
      activityStartTime: '',
      activityEndTime: '',
      rules: {
        account: [
          {required: true, message: '请输入', trigger: 'blur'}
        ],
        couponId: [
          {required: true, message: '请选择', trigger: 'blur'}
        ],
      },
    }

  },

  computed: {

  },
  created() {
    this.game();
  },
  methods: {
    selectProject(value){
      this.$set(this.form, 'gameId', '')
      this.$set(this.form, 'serverNum', '')
      if(value==''){
        this.gameserverlist={};

      }
      this.form.projectId=value
      this.server()
    },
    server(){
      gameserverList(this.form).then(res => {
        const data = res.data.data;
        const resultArr = [];//去重后的数组
        //var flag;
        for (var i in data){
          /*flag = true;
          for (var j in resultArr) {
            if (resultArr[j].serverName == data[i].serverName) {
              flag = false;
              break;
            }
          }
          if (flag) {
            resultArr.push(data[i]);
          }*/
          if(data[i].serverName != '') {
            resultArr.push(data[i]);
          }
        }

        this.gameserverlist = resultArr;
      });
    },
    gameSelect(){
      this.$set(this.form,'id','')
      this.showTime=false
      this.startTime= ''
      this.endTime= ''
      this.activityStartTime= ''
      this.activityEndTime= ''
      this.couponList=[]
    },
    coupon(){
      if(this.form.gameProjectId==''){
        this.$message({
          type: "error",
          message: "请先选择游戏!"
        });
        return;
      }
      this.showTime=false
      this.startTime= ''
      this.endTime= ''
      this.activityStartTime= ''
      this.activityEndTime= ''
      this.gamePra.gameProjectId=this.form.gameProjectId
      detailCouponList(this.gamePra).then(res => {
        const data = res.data.data;
        console.log("data",data)
        this.couponList = data;
      });
    },
    formatDateTime(timeStamp){
      var date = new Date();
      date.setTime(timeStamp);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      return y + '-' + m + '-' + d+' ';
    },
    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    isEmpty(arr) {
      return !this.isNotEmpty(arr)
    },
    game(){
      gameList().then(res => {
        const data = res.data.data;
        console.log("data",data)
        this.gamelist = data;
      });
    },
    optionCoupon(val){
      console.log("val",val)
      for (let i = 0; i < this.couponList.length; i++) {
        if(this.couponList[i].activityCouponId==val){
          this.startTime=this.formatDateTime(this.couponList[i].startTime)
          this.endTime=this.formatDateTime(this.couponList[i].endTime)
          this.activityStartTime=this.formatDateTime(this.couponList[i].activityStartTime)
          this.activityEndTime=this.formatDateTime(this.couponList[i].activityEndTime)
        }
      }
      this.showTime=true
    },

    closePayPackageSure(ruleForm){
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.$confirm("确定发放这些玩家优惠券？", '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.showLoading = true;
            grantCouponBatch(this.form).then(res=>{
              this.showLoading = false;
              let data = res.data;
              console.log("zs", data)
              if(data.success == true) {
                this.$message({
                  message: data.msg,
                  type: 'success'
                });
              } else {
                this.$message({
                  message: '赠送优惠券失败！',
                  type: 'error'
                });
              }
            })
          }).catch(() => {
          });
        } else {
          console.log('error submit!!')
          return false
        }
      })

    },
  }
}
</script>

<style scoped>
.first-loading-wrp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90vh;
  min-height: 90vh;
}

.first-loading-wrp>h1 {
  font-size: 30px;
  font-weight: bolder;
}

.first-loading-wrp .loading-wrp {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 38px;
}

.dot {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  width: 64px;
  height: 64px;
  font-size: 64px;
  transform: rotate(45deg);
  animation: antRotate 1.2s infinite linear;
}

.dot i {
  position: absolute;
  display: block;
  width: 28px;
  height: 28px;
  background-color: #1890ff;
  border-radius: 100%;
  opacity: 0.3;
  transform: scale(0.75);
  transform-origin: 50% 50%;
  animation: antSpinMove 1s infinite linear alternate;
}

.dot i:nth-child(1) {
  top: 0;
  left: 0;
}

.dot i:nth-child(2) {
  top: 0;
  right: 0;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.dot i:nth-child(3) {
  right: 0;
  bottom: 0;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.dot i:nth-child(4) {
  bottom: 0;
  left: 0;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

@keyframes antRotate {
  to {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}

@-webkit-keyframes antRotate {
  to {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}

@keyframes antSpinMove {
  to {
    opacity: 1;
  }
}

@-webkit-keyframes antSpinMove {
  to {
    opacity: 1;
  }
}
</style>
